<template>
	<view class="skill-pop" id="popAll" :style="{pointerEvents:show?'fill':'none'}" @click="handlePopClick">
		<view class="content" :style="{height:popHeigh+'rpx',bottom:show?'0rpx':-popHeigh-70+'rpx'}">

			<view class="inner">
				<view class="top-icon">
					<image class="top-icon-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/60cd2a758a6644e6af22b5869bef0618.png"
						mode="aspectFill"></image>
				</view>

				<view class="top-info">
					<view class="icon-box">
						<image class="icon-image" :src="skillObj.image" mode="aspectFill"></image>
					</view>
					<view class="info-intro-box">
						<view class="top-name-level-type">
							<view class="skill-name">{{skillObj.name}}</view>
							<view class="skill-level">Lv.{{skillObj.now}}</view>
							<view class="skill-type">事务</view>
						</view>
						<view class="intro-text">
							事务技能，技能效果在职位事务界面装配时生效。
						</view>

					</view>

				</view>

				<view class="attr-box">
					<view class="attr-row">
						<view class="attr-title">总裁经验</view>
						<view class="attr-num">+600</view>
					</view>
					<view class="attr-row skill-intro-row">
						<view class="attr-title">技能效果</view>
						<view class="attr-num">装配技能时，伙伴积极性提高，每次处理事务额外获得100点伙伴经验</view>
					</view>
					<view class="attr-row">
						<view class="attr-title">消耗</view>
						<view class="attr-num">2246/70</view>
					</view>

				</view>

				<view class="time-box">
					<!-- 	<u-count-down ref="mcountDown" :timestamp="270" separator-size="20" bg-color="transparent"
						separator-color="#bea67a" font-size="20" color="#bea67a"></u-count-down> -->
					00:04:30
				</view>
				<view class="btn-box">
					<view class="btn-item">
						<view class="btn-content">
							学习
						</view>
					</view>

				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from "vuex";
	export default {
		props: {
			storyId: {
				type: String,
				default: ""
			},
			popHeigh: {
				type: [Number, String],
				default: 600
			},
			maskCloseAble: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				show: false,
				skillObj: {}

			}
		},
		computed: {

		},
		watch: {
			show: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.$emit("show")
					} else {
						this.$emit("close")
					}
				},
				deep: true,
				immediate: true
			},



		},
		mounted() {

		},
		methods: {
			handlePopClick(e) {
				if (e.target.id == "popAll" && this.maskCloseAble) {
					this.show = false
					this.$emit("close")
				}
			},

			getProps() {

			},


			open(data) {
				this.show = true
				this.skillObj = {
					...data
				}
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.skill-pop {
		pointer-events: fill;
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		z-index: 999999999999;

		.content {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			width: 100vw;
			box-sizing: border-box;
			background-color: transparent;
			transition: bottom 0.3s;
			pointer-events: fill;
			box-sizing: border-box;

			.inner {
				position: relative;
				width: 100%;
				height: 100%;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 20rpx 20rpx 0rpx 0rpx;

				box-shadow: 0rpx 0rpx 6rpx #fff;
				box-sizing: border-box;
				padding: 20rpx;
				padding-top: 0rpx;

				.top-icon {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.top-icon-img {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.top-info {
					width: 100%;
					height: 150rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.icon-box {
						width: 150rpx;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;

						.icon-image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.info-intro-box {
						flex: 1;
						// height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.top-name-level-type {
							width: 100%;
							// height: 50rpx;
							display: flex;
							justify-content: flex-start;
							align-items: flex-end;
							margin-bottom: 20rpx;

							.skill-name {
								font-size: 30rpx;
								color: #000;
								line-height: 30rpx;
								text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .6);
								margin-right: 70rpx;
							}

							.skill-level {
								font-size: 24rpx;
								line-height: 24rpx;
								color: #7d7560;
								margin-right: 30rpx;
							}

							.skill-type {
								display: inline-block;
								font-size: 20rpx;
								color: #fff;
								background-color: #d7986c;
								padding: 0rpx 20rpx;
								line-height: 25rpx;
								border-radius: 15rpx 0rpx 15rpx 0rpx;
							}
						}

						.intro-text {
							width: 100%;
							// height: 50rpx;
							font-size: 22rpx;
							color: #5d5d5f;
						}

					}

				}

				.attr-box {
					width: 100%;
					margin-top: 30rpx;

					.attr-row {
						width: 100%;
						font-size: 20rpx;
						line-height: 30rpx;
						box-sizing: border-box;
						padding: 0rpx 20rpx;
						background-color: rgba(0, 0, 0, .05);
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						margin-bottom: 6rpx;
						border-radius: 5rpx;

						.attr-title {
							display: inline-block;
							margin-right: 60rpx;
							color: #c0a57a;
							min-width: 80rpx;
						}

						.attr-num {
							flex: 1;
						}
					}

					.skill-intro-row {

						// padding-bottom: 60rpx;
						.attr-num {
							margin-bottom: 20rpx;
						}
					}
				}

				.time-box {
					width: 100%;
					height: 40rpx;
					// background-color: pink;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;
					// margin-bottom: 20rpx;
					color: #bea67a;
					line-height: 40rpx;
				}

				.btn-box {
					width: 100%;
					height: 55rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.btn-item {
						width: 180rpx;
						height: 100%;
						margin-right: 20rpx;
						font-size: 24rpx;
						line-height: 60rpx;
						background-color: transparent;
						border-radius: 5rpx;
						box-shadow: 0rpx 0rpx 4rpx #fff;
						box-sizing: border-box;
						padding: 2rpx;

						.btn-content {
							width: 100%;
							height: 100%;
							background-color: #fef9d9;
							color: #000;
							border-radius: 5rpx;
							display: flex;
							justify-content: center;
							align-items: center;

						}
					}
				}


			}


		}


	}
</style>